<template>
    <div id="tabbar">

        <router-link to="/" :class="{'red':path=='/'}">
            <div class="tarbar">
                <span class="fa fa-home"></span>
                <p>首页</p>
            </div>
        </router-link>

        <router-link to="/Classify" :class="{'red':path=='/Classify'}">
            <div class="tarbar">
                <span class="fa fa-th-large"></span>
                <p>分类</p>
            </div>
        </router-link>
        <router-link to="/GoodsCard" :class="{'red':path=='/GoodsCard'}">
            <div class="tarbar">
                <span class="fa fa-shopping-cart"></span>
                <p>购物车</p>
            </div>
        </router-link>

        <router-link to="/Myself" :class="{'red':path=='/Myself'}">
            <div class="tarbar" :style="color">
                <span class="fa fa-user-circle-o"></span>
                <p>我的</p>
            </div>
        </router-link>
    </div>
</template>

<script>
export default {

computed:{
    path:function(){
        return this.$route.path;
    }
}
  
}
</script>

<style scoped>
    .red{
        color:#ee2c2c;
    }
    p{
        margin: 0;
        font-size: 12px;
    }
    a{
        text-decoration: none;
        color: grey;
    }
    #tabbar{
        height: 10vh;
        width: 100%;
        background-color: white;
        border-top: 1px solid #eee5de;
        position: fixed;
        bottom: 0;
    }
    .tarbar{
        padding-top:5px;
        display: inline-block;
        width: 23%;
        text-align: center;
        
    }

</style>